<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="">
			省份：
			<select name="" id="ProvinceID" onchange="changeProvince();">
				<option value="-1">请选择省份</option>
			</select>
			城市：
			<select name="" id="CityID" onchange="changeCity();">
				<option value="-1">请选择城市</option>
			</select>
			区县：
			<select name="" id="DistrictID" onchange="changeDistrict();">
				<option value="-1">请选择区县</option>
			</select>
			<br>
			你选择的地方是：<label id="selectValue"></label>
		</div>
	</body>
	<script type="text/javascript">
		var Provinces = ['江西省','福建省','浙江省','广东省','上海市'];
		var Citys = [
			['南昌市','赣州市','吉安市'],
			['福州市','龙岩市','厦门市'],
			['杭州市','温州市','嘉兴市'],
			['广州市','东莞市','深圳市'],
			['黄埔区','徐汇区','静安区']
		];
		var District = 
		[
			[['东湖区','西湖区','青云谱区'],
			['定南县','全南县','安远县','宁都县','于都县',],
			['吉州区','青原区','吉安县','吉水县']],
			
			[['闽侯县','连江县','罗源县','闽清县','永泰县'],
			['新罗区','漳平市','永定县','连城县','武平县'],
			['思明区','湖里区','集美区','海沧区','同安区']],
			
			[['拱墅区','滨江区','萧山区','余杭区','临安区','富阳区'],
			['鹿城区','龙湾区','瓯海区','洞头区','瑞安市'],
			['南湖区','秀洲区','海宁市','平湖市','桐乡市']],
			
			[['越秀区','荔湾区','海珠区','天河区','白云区'],
			['石龙镇','石排镇','茶山镇','企石镇'],
			['福田区','罗湖区','盐田区','龙岗区','龙华区']],
			
			[['南京东路','外滩','瑞金二路','淮海中路'],
			['虹梅路街道','田林街道','凌云路街道','龙华街道','华泾镇'],
			['静安寺街道','曹家渡街道','江宁路街道','石门二路街道']]
		];
		function changeProvince(){
			var provinceObj = document.getElementById('ProvinceID');
			var cityObj = document.getElementById('CityID');
			var districtObj = document.getElementById('DistrictID');
			var cityName = [provinceObj.value];
			cityObj.innerHTML = `<option value="-1">请选择城市</option>`;
			districtObj.innerHTML = `<option value="-1">请选择区县</option>`;
			if(provinceObj.value == -1){	
				return;
			}
			for(var i =0;i<cityName.length;i++){
				cityObj.innerHTML+=`<option value="`+i+`">`+cityName[i]+`</option>`;
			}
			
		}
		function changeCity(){
			var provinceObj = document.getElementById('ProvinceID');
			var cityObj = document.getElementById('CityID');
			var districtObj = document.getElementById('DistrictID');
			if(cityObj.value==-1){
				districtObj.innerHTML= `<option value="-1">请选择区县</option>`;
				return;
			}
			districtObj.innerHTML= `<option value="-1">请选择区县</option>`;
			var districtName = District[provinceObj.value][cityObj.value];
			for(var i =0;i<districtName.length;i++){
				districtObj.innerHTML+=`<option value="`+i+`">`+districtName[i]+`</option>`;
			}
		}
		function changeDistrict(){
			var provinceObj = document.getElementById('ProvinceID');
			var cityObj = document.getElementById('CityID');
			var districtObj = document.getElementById('DistrictID');
			var selectObj = document.getElementById('selectValue');
			selectObj.innerText = Provinces[provinceObj.value]+'-'+Citys[provinceObj.value][cityObj.value]+'-'+District[provinceObj.value][cityObj.value][districtObj.value];
		}
		onload = function(){
			var provinceObj = document.getElementById('ProvinceID');
			for(var i=0; i<Provinces.length;i++){
				provinceObj.innerHTML+=`<option value="`+i+`">`+Provinces[i]+`</option>`;
			}
		}
		
	</script>
</html>
